<template>
<div class="container">
    <div class="title-three">监督对象</div>
    <div class="choise-row">
        <div class="choise-row-left">
            <span class="label">公司名称：</span>
            <el-select v-model="valueDown">
                <el-option label="全部" value=""></el-option>
                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <span class="label">关键字：</span>
            <el-input v-model="inputvalue" placeholder="请输入姓名或身份证"></el-input>
            <el-row>
                <el-button type="query" @click="Getlist">查询</el-button>
                <el-button type="Reset" @click="GetBack">重置</el-button>
            </el-row>
        </div>
        <div class="choise-row-right">
            <el-button-group>
                <Delete-all title="是否要删除所选信息吗？" :clearAll="clearAll"></Delete-all>
                <Import-all></Import-all>
                <el-button type="newlybuild" icon="el-icon-plus" @click="goNewBuild">新建</el-button>
            </el-button-group>
        </div>
    </div>
    <div class="table-box-three-main">
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" border>
            <el-table-column type="selection" width="50" align="center"></el-table-column>
            <el-table-column type="index" label="序号" width="51" align="center"></el-table-column>
            <el-table-column prop="name" label="姓名" width="130" align="center"></el-table-column>
            <el-table-column prop="idCard" label="身份证号" width="230" align="center"></el-table-column>
            <el-table-column prop="companyName" label="公司名称" min-width="200" align="center"></el-table-column>
            <el-table-column prop="post" label="职务" width="180" align="center"></el-table-column>
            <el-table-column prop="sex" label="性别" width="110" align="center"></el-table-column>
            <el-table-column prop="mobilePhone" label="联系电话" width="235" align="center"></el-table-column>
            <el-table-column prop="operation" label="操作" width="150" align="center">
                <template slot-scope="scope">
                    <el-button type="text" @click="GotoDetail(scope.row)">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 分页开始 -->
    <div class="fenye-bottom">
        <Pagination :total="total" :params="paramsClass" :get="getSuperviseList"></Pagination>
    </div>
    <!-- 分页结束 -->
</div>
</template>

<script>
import Pagination from "@/components/Popup/Pagination.vue";
//批量删除
import DeleteAll from "@/components/IncorruptibleArchives/DeleteAll.vue";
//批量导入
import ImportAll from "@/components/IncorruptibleArchives/ImportAll.vue";
export default {
    components: {
        Pagination,
        DeleteAll,
        ImportAll,
    },
    data() {
        return {
            paramsClass: {
                pageNum: 1,
                pageSize: 10,
                publishStatus: "",
                title: "",
            },
            total: 0,
            valueDown: "",
            inputvalue: "",
            options: [],
            tableData: [],
            //复选框选择时的
            multipleSelection: [],
            //监督对象公司列表请求参数
            paramsJson: {
                companyId: "",
                keyword: "",
                pageNum: "1",
                pageSize: "10",
            },
        };
    },
    created() {
        //监督对象公司列表
        this.getSuperviseList();
        //查询公司的下拉列表
        this.getSuperviseCompanyList()
    },
    methods: {
        //监督对象公司列表
        getSuperviseList() {
            this.Api.getSuperviseList(this.paramsJson).then((res) => {
                if (res.code === "0") {
                    this.tableData = res.data.records;
                } else {
                    this.$message.error("获取监督对象列表失败");
                }
            });

        },
        //查询公司的下拉列表
        getSuperviseCompanyList() {
            this.Api.getSuperviseCompanyList().then((res) => {
                if (res.code === "0") {
                    this.options = res.data;
                } else {
                    this.$message.error("获取公司下拉列表失败");
                }
            });
        },
        //查询anniu
        Getlist() {
            this.paramsJson = {
                companyId: this.valueDown,
                keyword: this.inputvalue,
                pageNum: "1",
                pageSize: "10",
            }
            this.getSuperviseList();
        },
        //重置
        GetBack() {
            this.paramsJson = {
                companyId: "",
                keyword: "",
                pageNum: "1",
                pageSize: "10",
            }
            this.valueDown = "";
            this.inputvalue = "";
            this.getSuperviseList();
        },
        //复选框选择时触发赛选选中的id
        handleSelectionChange(val) {
            const _this = this
            this.multipleSelection = [];
            if (val.length > 0) {
                val.forEach(function (item, index, array) {
                    _this.multipleSelection.push({
                        id: item.id,
                    });
                });
            }
        },
        //删除的按钮
        clearAll() {
            if (this.multipleSelection.length > 0) {
                this.Api.getSuperviseClear({
                    ids: this.multipleSelection
                }).then(res => {
                    if (res.code === "0") {
                        this.$message.success("删除成功");
                        this.getSuperviseList();
                    } else {
                        this.$message.error("删除失败");
                    }
                })
            } else {
                this.$message.warning("请先勾选删除项");
            }
        },
        //, params: { id: id } ,query:{id:1}
        //点击跳转详情
        GotoDetail(row) {
            console.log(row)
            this.$router.push({
                name: "supervisedetail",
                query: {
                    id: row.id,
                    type: 1
                }
            });
        },
        //新建按钮的跳转页面
        goNewBuild() {
            this.$router.push({
                name: "SuperviseNewbuild",
                query: {
                    type: 1
                }
            });
        },
    },
};
</script>

<style lang="less" scoped>
.container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.table-box-three-main {
    width: 100%;
    height: calc(100% - 163px);

    .el-table {
        width: 100%;
        height: 100%;
        overflow: auto;

        /deep/.el-table__body-wrapper {
            width: 100%;
            height: calc(100% - 48px);
            overflow: auto;
        }
    }
}

.fenye-bottom {
    /deep/.el-pagination {
        margin-top: 15px;
    }
}
</style>
